<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
</div>

</body>

<script>
    const hello = Vue.extend({
        template: `<h1>hello，{{msg}}</h1>`,

        data() {
            return {
                msg: '搜索'
            }
        }
    })
    //第一步：创建student组件
    const student = Vue.extend({
        template: `
            <div>
                <h1>学生姓名：{{studentName}}</h1>
                <h1>学生性别：{{studentSex}}</h1>
                <button @click="aa">点我提示学生名</button>
            </div>
        `,
        data(){
            return {
                studentName: '张三',
                studentSex: '男',
            }
        },
        methods: {
            aa(){
                alert(this.studentName)
            }
        }
    })
    //  创建学校组件：
    const school = Vue.extend({
        template: `
            <div>
                <h1>学校名称：{{schoolName}}</h1>
                <h1>学校地址：{{schoolAddress}}</h1>
                <student></student>
            </div>
        `,
        data(){
            return {
                schoolName: '清华大学',
                schoolAddress: '北京',
            }
        },
        components: {
            student
        }
    })

    const app = Vue.extend({
        components: {
            school,hello
        },
        template: `
            <div>
              <school></school>
              <hello></hello>
            </div>
        `
    })
    const vm = new Vue({

        template: `
            <app></app>
        `,
        el: '#root',
        data: {
            msg: '你好啊！',
        },
        //第二步：注册组件（局部注册）
        components: {
            app
        }

    })
</script>
</html>